import React, { useEffect, useState } from 'react';
import { Tabs } from 'antd';
import Home from './Home';
import Solenoid from './Solenoid';
import Gearbox from './Gearbox';
import Electronic from './Electronic';
import Sensor from './Sensor';
import Repair from './Repair';
 import PubSub from 'pubsub-js'
import Footer1 from '../Home/Footer1';

import { Footer10DataSource } from '../Home/data.source';

import '../Home/less/antMotionStyle.less'


const items = [
  {
    key: '1',
    label: 'ALL',
    children: <Home />,
  },
  {
    key: '2',
    label: 'SOLENOID VALVE',
    children: <Solenoid />,
  },
  {
    key: '3',
    label: 'GEARBOX VALVE',
    children: <Gearbox />,
  },
  {
    key: '4',
    label: 'ELECTRONIC SWITCH',
    children: <Electronic />,
  },
  {
    key: '5',
    label: 'SENSOR',
    children: <Sensor />,
  },
  {
    key: '6',
    label: 'REPAIR KITS &PRODUCT PARTS',
    children: <Repair />,
  }
]; // 动态过滤;


const Product = () => {
  const [activeKey,setActiveKey] = useState('')
  const onChange = key => {
  setActiveKey(key)
};
PubSub.subscribe('item',(msg,data)=>{
  const key =  items.find(i=> i.label == data)?.key || '1'
  setActiveKey(key)
})
useEffect(()=>{
  const item = window.sessionStorage.getItem('item')
  let key = '1';
  if(item) {
   const temp = items.find(i=> i.label == item)?.key || '1'

    key = temp
  }
   console.log('key',key)
  setActiveKey(key)
},[])
  return (
    <>
      <Tabs 
      activeKey={activeKey}
       centered
        items={items}
         onChange={onChange} />
      <div className='homeHr'>
         Find us
      </div>
      <Footer1
        id="Footer1_0"
        key="Footer1_0"
        dataSource={Footer10DataSource}
      />
    </>
  )
}

export default Product;